<template>
  <div class="container">
    <div class="header" style="height: 120px">
      <el-input
        v-model="title"
        placeholder="请输入关键词，如：如何审核项目申报，如何添加保证金"
        style="width: 500px"
      >
        <el-button
          slot="append"
          class="saveBtn"
          type="primary"
          @click="seachHelp"
          >搜索</el-button
        >
      </el-input>
    </div>
    <div class="containerBox1">
      <!-- <el-aside> -->
      <div class="menu_title">操作说明</div>
      <el-menu default-active="2" class="el-menu-vertical-demo">
        <template v-for="(item, index) of menuList">
          <el-submenu :index="index + 1 + ''" v-if="item.child" :key="index">
            <template slot="title">
              &nbsp;
              <span slot="title">{{ item.name }}</span>
            </template>
            <el-menu-item
              :index="each.name"
              v-for="(each, number) of item.child"
              :key="number"
              @click="toDetail(each)"
            >
              <span slot="title">{{ each.menuName }}</span>
            </el-menu-item>
          </el-submenu>

          <el-menu-item
            :index="item.name"
            v-else-if="!item.child"
            :key="index"
            @click="toDetail(item)"
          >
            <span slot="title">{{ item.name }}</span>
          </el-menu-item>
        </template>
      </el-menu>
      <!-- </el-aside> -->
      <el-main style="min-height: 480px">
        <div v-if="isShow">
          <div
            style="
              padding-top: 10px;
              position: relative;
              height: 500px;
              padding-left: 20px;
            "
          >
            <div style class="helpTel">客服电话</div>
            <el-divider class="helpDivider" />
            <div style="position: absolute; top: 80px; left: 20px">
              <div style="color: #333300; font-size: 16px">
                <!-- <img
                  src="../../../static/img/help_logo.png"
                  style="vertical-align: middle;margin-right: 10px;"
                  class = "bgcTheme"
                /> -->
                <img
                  src="../../../static/img/helpLog.svg"
                  alt=""
                  class="logo-img"
                />
                客服电话
              </div>
              <p
                style="
                  padding: 5px 5px 5px 35px;
                  color: #333300;
                  font-size: 16px;
                "
              >
                服务专线4000-966-687，享受快速的人工电话服务
              </p>
              <p
                style="
                  padding: 5px 5px 5px 35px;
                  color: #333300;
                  font-size: 16px;
                "
              >
                服务时间：每天8:30-17:30
              </p>
            </div>
          </div>
        </div>
        <div v-else>
          <div
            style="
              padding-top: 10px;
              padding-left: 20px;
              position: relative;
              height: 500px;
            "
          >
            <div class="helpTel">{{ helpInfo.title }}</div>
            <el-divider class="helpDivider" />
            <div
              style="position: absolute; top: 90px; left: 20px"
              class="content"
            >
              <div
                class="imgBox"
                v-html="helpInfo.content"
                style="padding-bottom: 20px"
              ></div>
            </div>
          </div>
        </div>
      </el-main>
    </div>
  </div>
</template>

<script>
export default {
  name: 'helpViewer',
  data() {
    return {
      uniqueOpened: true,
      collapse: false, //左侧菜单控制展开隐藏
      index: 0,
      routeName: '',
      title: '',
      menuList: [],
      isTransition: false,
      helpInfo: {},
      isShow: true,
    }
  },
  created() {
    this.getMenuList()
  },
  methods: {
    getMenuList() {
      let appid = this.$store.state.menuList[0].appId
      this.axios({
        method: 'post',
        url: 'api-m/help/helplist',
        data: {
          sysAppCode: localStorage.getItem('judgeRoleCode'),
          clientType: 'PC',
          appId: appid,
        },
      })
        .then((response) => {
          this.menuList = response.data.result
        })
        .catch((response) => {})
    },
    seachHelp() {
      let appid = this.$store.state.menuList[0].appId
      this.axios({
        method: 'post',
        url: 'api-m/help/detail',
        data: {
          // helpId: "",
          title: this.title,
          appId: appid,
        },
      })
        .then(
          (response) => {
            if (!response.data.hasError) {
              if (response.data.result.id) {
                this.isShow = false
                this.helpInfo = response.data.result
              } else {
                this.isShow = true
              }
            } else {
              this.$message({
                message: response.data.errorMsg,
                type: 'error',
              })
            }
          },
          (response) => {}
        )
        .catch((error) => {})
    },
    toDetail(item) {
      this.axios({
        method: 'post',
        url: 'api-m/help/detail',
        data: {
          helpId: item.id,
          // title:item.title,
          // appId:item.menuId
        },
      })
        .then(
          (response) => {
            if (!response.data.hasError) {
              if (response.data.result.id) {
                this.isShow = false
                this.helpInfo = response.data.result
              } else {
                this.isShow = true
              }
            } else {
              this.$message({
                message: response.data.errorMsg,
                type: 'error',
              })
            }
          },
          (response) => {}
        )
        .catch((error) => {})
    },
  },
}
</script>

<style scoped lang="less">
.container {
  height: calc(100% - 124px);
  //   padding: 24px;
}
.containerBox1 {
  //   height: calc(100% - 72px);
  height: calc(100% - 120px);
  overflow-y: auto;
  position: relative;
  background-color: #fff;
}
.helpTel {
  font-size: 18px;
  //   padding-left: 20px;
  text-align: justify;
  font-weight: bold;
  color: #333333;
  line-height: 48px;
}
.helpDivider {
  margin: 0 0 24px;
}
.header {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 120px;
  /deep/ .el-input__inner {
    border: none;
  }
  /deep/ .el-input-group__append,
  .el-input-group__prepend {
    border: none;
  }
  .saveBtn {
    height: 36px;
    color: #ffffff;
    font-size: 14px;
    border-radius: 0 4px 4px 0;
  }
  .saveBtn {
    background-color: #009588;
    border-color: #009588;
    color: #fff;
  }
  .saveBtn:hover,
  .saveBtn:focus {
    background-color: #009588;
    border-color: #009588;
    color: #fff;
    opacity: 0.8;
  }
}
.menu_title {
  position: absolute;
  left: 10px;
  top: 10px;
  height: 56px;
  line-height: 56px;
  color: #333;
  font-weight: bold;
  padding-left: 20px;
  width: 250px !important;
  background-color: #f5f7fb;
  border-right: solid 1px #e6e6e6;
}
.el-menu-vertical-demo {
  display: block;
  position: absolute;
  left: 10px;
  top: 66px;
  bottom: 10px;
  width: 250px !important;
  background-color: #f5f7fb;
  overflow: auto;
}

.el-main {
  display: block;
  position: absolute;
  left: 260px;
  top: 0px;
  bottom: 0;
  right: 0;
  background-color: #ffffff;
}
.marker {
  width: 10px;
  height: 10px;
  border: 1px solid #5d5a58;
  border-radius: 100px;
  background-color: #5d5a58;
  opacity: 0.5;
  display: inline-block;
  margin: 3px;
}

.imgBox {
  /deep/ img {
    max-width: 100%;
  }
}
/deep/.el-divider--horizontal {
  margin: 10px 0 !important;
}
.logo-img {
  position: relative;
  left: -80px;
  top: 5px;
  filter: drop-shadow(#009588 80px 0);
}
</style>
